<template>
  <div class="vip">
    <vip-nav-bar></vip-nav-bar>
    <top-bar-v-i-p></top-bar-v-i-p>
    <el-carousel trigger="click" height="160px" style="margin-top: 20px;width: 90%;margin-left: 5%">
      <el-carousel-item v-for="item in pics" :key="item">
        <el-image :src="item"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import NavBar from "@/components/content/navbar/NavBar.vue";
import VipNavBar from "@/components/views/vip/VipNavBar.vue";
import TopBarVIP from "@/components/views/vip/TopBarVIP.vue";

export default {
  name: "vip",
  components: {TopBarVIP, VipNavBar, NavBar},
  data() {
    return {
      NavItems: [],
      pics:[
          require('@/assets/temp/111.png'),
          require('@/assets/temp/11.png')
      ]
    }
  }
}
</script>

<style scoped>
.vip {
  background-image: -moz-linear-gradient(90deg, rgba(255, 139, 105, 0) 0%, rgba(255, 82, 89, 0.76863) 44%, rgba(255, 11, 69, 0.81961) 100%);
  background-image: -webkit-linear-gradient(90deg, rgba(255, 139, 105, 0) 0%, rgba(255, 82, 89, 0.76863) 44%, rgba(255, 11, 69, 0.81961) 100%);
  background-image: -ms-linear-gradient(90deg, rgba(255, 139, 105, 0) 0%, rgba(255, 82, 89, 0.76863) 44%, rgba(255, 11, 69, 0.81961) 100%);
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 300px;
  z-index: 2;
}



</style>
